<template>
  <el-cascader ref="elCascader" :value="value" :options="options" :clearable="clearable" :props="propAttr" v-bind="$attrs" @change="handleChange" v-on="$listeners">
    <slot />
  </el-cascader>
</template>

<script>
export default {
  name: 'MyCascader',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    /**
     * todo 当使用:value的时候，初始化的值为数组，全部清空tags不会清空
     */
    value: { },
    // value: {},
    clearable: { type: Boolean, default: false },
    options: { type: Array, default: () => [] },
    expandTrigger: { type: String, default: 'click', validator: (val) => ['click', 'hover'].indexOf(val) > -1 },
    propMultiple: { type: Boolean, default: false },
    checkStrictly: { type: Boolean, default: false },
    emitPath: { type: Boolean, default: true },
    props: { type: Object, default: () => null },
    lazy: { type: Boolean, default: false },
    lazyLoad: { type: Function, default: () => null },
    propValue: { type: String, default: 'value' },
    label: { type: String, default: 'label' },
    children: { type: String, default: 'children' },
    disabled: { type: String, default: 'disabled' },
    leaf: { type: String, default: 'leaf' }
  },
  computed: {
    propAttr() {
      return this.props && Object.keys(this.props).length > 0 ? this.props : {
        expandTrigger: this.expandTrigger,
        multiple: this.propMultiple,
        checkStrictly: this.checkStrictly,
        emitPath: this.emitPath,
        lazy: this.lazy,
        lazyLoad: this.lazyLoad,
        value: this.propValue,
        label: this.label,
        children: this.children,
        disabled: this.disabled,
        leaf: this.leaf
      }
    }
  },
  mounted() {},
  methods: {
    handleChange(val) {
      this.$emit('change', val)
    },
    getCheckedNodes() {
      return this.$refs.elCascader.getCheckedNodes()
    }
  }
}
</script>

<style>

</style>
